<template>
  <div id="search">
    <my-nav-bar class="nav-bar" >
      <template v-slot:left>
        <van-icon
          class="left"
          name="arrow-left"
          size="20"
          color="#333"
          @click="back"
        />
      </template>
      <template v-slot:center>
        <van-search
          class="center"
          shape="round"
          v-model="value"
          placeholder="请输入搜索关键词"
          @input="startSearch"
        />
      </template>
      <template v-slot:right>
        <van-button
          class="right"
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          size="mini"
          round
          @click="startSearch"
        >
          搜索
        </van-button>
      </template>
    </my-nav-bar>
    <div :style="{height: '40px'}"></div>
    <div class="newGoods">
      <template v-if="goodsList.length !== 0">
        <div class="new-goods-list">
          <goods-item
            class="new-goods-list-item"
            @click.native="openGoods(item)"
            v-for="(item, index) in goodsList"
            :key="index"
            :goodsInfo="item"
          />
        </div>
      </template>
      <template v-else>
        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="请尝试搜索其它商品"
        />
      </template>
    </div>
  </div>
</template>

<script>
import { NavBar, Search, Icon, Button, Empty } from "vant";
import MyNavBar from "@/components/MyNavBar/MyNavBar.vue";
import GoodsItem from "@/views/Home/HomeChildren/GoodsItem.vue";

import { searchGoods } from "@/network";

export default {
  name: "Search",
  data() {
    return {
      value: "",
      goodsList: [],
    };
  },
  components: {
    MyNavBar,
    GoodsItem,
    [NavBar.name]: NavBar,
    [Search.name]: Search,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Empty.name]: Empty,
  },
  methods: {
    back() {
      this.$router.back();
    },
    async startSearch() {
      // console.log(this.value);
      if (this.value !== "") {
        console.log(this.value);
        const {
          data: { data },
        } = await searchGoods({ keyword: this.value });
        console.log(data);
        this.goodsList = data.list;
      } else {
        this.goodsList = [];
      }
    },
     //打开商品详情信息页
    openGoods(item) {
      this.$router.push({
        name: 'GoodsDetail',
        query: {
          id: item.id
        }
      } )
    },
  },
  async created() {
    console.log(this.$route.query.id);
    if(typeof this.$route.query.id !== 'undefined') { //查询如果有从别的页面带过来的路由参数
       const { //如果有参数就使用路由参数进行请求渲染
          data: { data },
        } = await searchGoods({ categoryId: this.$route.query.id });
        this.goodsList = data.list;
    }
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.nav-bar {
  position: fixed;
  top: 0;
  background: #fff;
  align-items: center;
  padding: 0 5px;
  box-sizing: border-box;
  .left {
    width: 24px;
    // height: 20px !important;
    // line-height: 46px !important;
  }
  .center {
    // display: flex;
    flex: 1;
    height: 25px;
    border-radius: 5px;
    background: none;
  }
  .right {
    width: 52px;
    height: 24px;
    font-size: 12px;
  }
}
#search {
  background: rgb(242,242,242);
  min-height: 100vh;
}
.newGoods {
  padding-top: 15px;
  width: 100%;
  .new-goods-list {

    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,45%);
    // grid-row-gap: 10px;
    grid-column-gap: 10px;
  justify-content: center;
    .new-goods-list-item {
      margin-top: 10px;
      height: 240px;
      background: #fff;
      border-radius: 15px;
    }
  }
}
</style>

